<template>
	<view>
		<view class="body after-navber">
			<view class="bottom-bar flex-row">
				<view class="flex-y-center flex-grow-1" style="padding: 0 24rpx">
					<view @tap="cartCheckAll" class="flex-grow-0 flex-y-center" style="margin-right: 20rpx">
						<view :class="'cart-checkbox ' + (cart_check_all ? 'active' : '')" style="margin-right: 10rpx">
						</view>
						<text style="white-space: nowrap">全选</text>
					</view>
					<view class="flex-grow-1" style="color: #ff4544; white-space: nowrap">总计:￥{{ total_price }}</view>
				</view>
				<block v-if="show_cart_edit">
					<view @tap="cartDone" class="flex-y-center flex-grow-0 flex-x-center edit-btn">完成</view>
					<view @tap="cartDelete" class="flex-y-center flex-grow-0 flex-x-center submit-btn">删除</view>
				</block>
				<block v-else>
					<view @tap="cartEdit" class="flex-y-center flex-grow-0 flex-x-center edit-btn">编辑</view>
					<view @tap="cartSubmit" class="flex-y-center flex-grow-0 flex-x-center submit-btn">结算</view>
				</block>
			</view>
			<view class="no-data-tip" v-if="!cart_list.length && !mch_list.length && !loading">
				<view class="no-data-icon flex-y-center flex-x-center">
					<image src="/static/images/nav-icon-cart.png" style="width: 81rpx; height: 81rpx"></image>
				</view>
				<view>购物车还是空的哦</view>
			</view>
			<block v-else>
				<block v-if="cart_list && cart_list.length">
					<view class="flex flex-row mch-header">
						<view @tap="checkGroup" class="flex-grow-0 flex-y-center" data-index="0" data-type="self"
							style="padding: 24rpx">
							<view :class="'cart-checkbox ' + (check_all_self ? 'active' : '')"></view>
						</view>
						<view class="flex-grow-1 flex-y-center">平台自营</view>
					</view>
					<view class="cart-list">
						<view class="cart-item flex-row" v-for="(item, index) in cart_list" :key="item.id">
							<view class="flex-grow-0 flex-y-center" style="padding: 24rpx"
								v-if="item.disabled && !show_cart_edit">
								<view style="width: 40rpx"></view>
							</view>

							<view @tap="cartCheck" class="flex-grow-0 flex-y-center" :data-index="index"
								data-mch-index="0" data-type="self" style="padding: 24rpx" v-else>
								<view :class="'cart-checkbox ' + (item.checked ? 'active' : '')"></view>
							</view>

							<view class="flex-grow-1">
								<view class="flex-grow-1 flex-row">
									<view class="flex-grow-0">
										<navigator :url="'/pages2/shop/goods-detail/goods-detail?id=' + item.product_id">
											<image class="goods-pic" mode="aspectFill" :src="item.image"></image>
										</navigator>
									</view>
									<view class="flex-grow-1 flex-col">
										<view class="flex-grow-1">
											<view class="goods-name">
												<navigator :url="'/pages2/shop/goods-detail/goods-detail?id=' + item.product_id">
													{{ item.name }}
												</navigator>
											</view>
											<view class="attr-list">
												<view class="attr-item"
													v-if="item.sku">
													{{ item.sku.product_sku_text}}
												</view>
												<view class="attr-item"
													v-else>
													默认
												</view>
											</view>
										</view>
										<view class="flex-grow-0 flex-row">
											<view class="flex-grow-1 price">￥{{ item.price }}</view>
											<view>
												<view class="flex-row">
													<image @tap="cartLess(index,0,$event)" class="image1" :data-id="item.id" 
														src="/static/images/cart-less.png" v-if="item.number > 1"></image>
													<image class="image1" src="/static/images/cart-no-less.png" v-else>
													</image>
													<view class="row-data">{{ item.number }}</view>
													<image class="image1" src="/static/images/cart-no-add.png"
														v-if="item.number == item.max_num"></image>
													<image @tap="cartAdd(index,0,$event)" class="image1" :data-id="item.id" 
														src="/static/images/cart-add.png"
														v-if="item.number != item.max_num">
													</image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view>
									<text class="cart-tag" v-if="item.msg">{{item.msg}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="mch_list && mch_list.length">
					<view class="mch-item" v-for="(item, mch_index) in mch_list" :key="item.id">
						<view class="flex flex-row mch-header">
							<view @tap="checkGroup" class="flex-grow-0 flex-y-center" :data-index="mch_index"
								data-type="mch" style="padding: 24rpx">
								<view :class="'cart-checkbox ' + (item.checked_all ? 'active' : '')"></view>
							</view>
							<view class="flex-grow-1 flex-y-center">{{ item.store.name }}</view>
						</view>

						<view class="cart-list">
							<view class="cart-item flex-row" v-for="(cart, index) in item.list" :key="cart.id">
								<view class="flex-grow-0 flex-y-center" style="padding: 24rpx"
									v-if="cart.disabled && !show_cart_edit">
									<view style="width: 40rpx"></view>
								</view>

								<view @tap="cartCheck" class="flex-grow-0 flex-y-center" :data-index="index"
									:data-mch-index="mch_index" data-type="mch" style="padding: 24rpx" v-else>
									<view :class="'cart-checkbox ' + (cart.checked ? 'active' : '')"></view>
								</view>

								<view class="flex-grow-1">
									<view class="flex-grow-1 flex-row">
										<view class="flex-grow-0">
											<navigator :url="'/pages2/shop/goods-detail/goods-detail?id=' + cart.product_id">
												<image class="goods-pic" mode="aspectFill" :src="cart.image"></image>
											</navigator>
										</view>
										<view class="flex-grow-1 flex-col">
											<view class="flex-grow-1">
												<view class="goods-name">
													<navigator :url="'/pages2/shop/goods-detail/goods-detail?id=' + cart.product_id">
														{{ cart.name }}
													</navigator>
												</view>
												<view class="attr-list">
												<view class="attr-item"
													v-if="cart.sku">
													{{ cart.sku.product_sku_text}}
												</view>
												<view class="attr-item"
													v-else>
													默认
												</view>
												</view>
											</view>
											<view class="flex-grow-0 flex-row">
												<view class="flex-grow-1 price">￥{{ cart.price }}</view>
												<view>
													<view class="flex-row">
														<image @tap="cartLess(mch_index,index,$event)" class="image1" :data-index="index"
															:data-mch-index="mch_index" data-type="mch"
															:data-id="cart.id"  src="/static/images/cart-less.png"
															v-if="cart.number != 1"></image>
														<image class="image1" src="/static/images/cart-no-less.png"
															v-if="cart.number == 1"></image>
														<view class="row-data">{{ cart.number }}</view>
														<image class="image1" src="/static/images/cart-no-add.png"
															v-if="cart.number == cart.max_num"></image>
														<image @tap="cartAdd(mch_index,index,$event)" class="image1" :data-index="index"
															:data-mch-index="mch_index" data-type="mch"
															:data-id="cart.id" src="/static/images/cart-add.png"
															v-if="cart.number != cart.max_num"></image>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view>
											<text class="cart-tag" v-if="cart.msg">{{cart.msg}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view style="height: 109rpx"></view>
			</block>
		</view>
	</view>
</template>

<script>
	import {Cart} from '../../../apirequest/cart-model.js';
	var c = new Cart();
	export default {
		data() {
			return {
				cart_check_all: false,
				check_all_self: false,
				show_cart_edit:false,
				cart_list: [],
				total_price: '0.00',
				mch_list: [],
			}
		},
		onLoad() {
		
		},
		onShow() {
			this._index();
		},
		methods: {
			_index(){
				var that = this;
				c.get_cart_list((res) => {
					if(res.code == 1){
						that.mch_list = res.data
					}else{
						uni.showToast({
							title:'网络错误',
							icon:'none'
						})
					}
				})
			},
			cartLess: function(inx1,inx2,t) {
				var that = this;
				var id = t.currentTarget.dataset.id
				var mch_list = this.mch_list;
				var cart_list = this.cart_list;
				var type = 'mch';
				var number = 1;
				if (t.currentTarget.dataset.type && 'mch' == t.currentTarget.dataset.type) {
						
					number = mch_list[inx1].list[inx2].number;
				} else {					
					number = cart_list[inx1].number;	
					type = 'self';
				}
				c.update_cart({id:id,number:number-1},(res) => {
					if(res.code == 1){
						if(type == 'mch'){
							mch_list[inx1].list[inx2].number = number-1
						}else{
							 cart_list[inx1].number = number-1	
						}
						that.mch_list = mch_list
						that.cart_list = cart_list
						that.updateTotalPrice();
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})	
			},

			cartAdd: function(inx1,inx2,t) {
				var that = this;
				var id = t.currentTarget.dataset.id
				var mch_list = this.mch_list;
				var cart_list = this.cart_list;
				var type = 'mch';
				var number = 1;
				if (t.currentTarget.dataset.type && 'mch' == t.currentTarget.dataset.type) {
					
					number = mch_list[inx1].list[inx2].number;
				} else {					
					number = cart_list[inx1].number;	
					type = 'self';
				}
				c.update_cart({id:id,number:number+1},(res) => {
					if(res.code == 1){
						if(type == 'mch'){
							mch_list[inx1].list[inx2].number = number+1
						}else{
							 cart_list[inx1].number = number+1	
						}
						that.mch_list = mch_list
						that.cart_list = cart_list
						that.updateTotalPrice();
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})		
			},

			cartCheck: function(t) {
				var that = this;
				var i = t.currentTarget.dataset.index;
				var c = t.currentTarget.dataset.type;
				var e = t.currentTarget.dataset.mchIndex;
				if ('self' == c) {
					that.cart_list[i].checked = !that.cart_list[i].checked;
					if(that.cart_list[i].checked === false){
						that.cart_check_all = false
					}
				}
				if ('mch' == c) {
					that.mch_list[e].list[i].checked = !that.mch_list[e].list[i].checked;
					if(that.mch_list[e].list[i].checked === false){
						that.cart_check_all = false
					}
					
				}

				that.updateTotalPrice();
			},

			cartCheckAll: function() {
				var that = this;
				var a = that.cart_list;
				var i = !that.cart_check_all;
				for (var c in a) {
					a[c].checked = i
				}

				if (that.mch_list && that.mch_list.length) {
					for (var c in that.mch_list) {
							that.mch_list[c].checked_all = i
						for (var e in that.mch_list[c].list) {
							that.mch_list[c].list[e].checked = i;
						}
					}
				}
				that.cart_check_all = i
				that.cart_list = a
				that.updateTotalPrice();
			},

			updateTotalPrice: function() {
				var that = this;
				var a = 0;
				var i = that.cart_list;
				for (var c in i) {
					if (i[c].checked) {
						a += parseFloat(i[c].price) * parseInt(i[c].number) ;
					}
				}

				for (var c in that.mch_list) {
					for (var e in that.mch_list[c].list) {
						if (that.mch_list[c].list[e].checked) {
							a +=  parseFloat(that.mch_list[c].list[e].price) * parseInt(that.mch_list[c].list[e].number) ;
						}
					}
				}
				that.total_price = a.toFixed(2)
			},
			cartEdit: function () {
			    var t = this.cart_list;
			
			    for (var a in t) {
			        t[a].checked = false;
			    }
			this.cart_list=t
			this.show_cart_edit=true
			this.cart_check_all=false
			    this.updateTotalPrice();
			},
			cartDone: function () {
			    var t = this.cart_list;
			
			    for (var a in t) {
			        t[a].checked = false;
			    }
			this.cart_list=t
			this.show_cart_edit=false
			this.cart_check_all=false
			    this.updateTotalPrice();
			},
			
			cartDelete: function () {
			    var that = this;
			    var t = that.cart_list;
			    var i = [];
			    for (var n in t) {
			        if (t[n].checked) {
			            i.push(t[n].id);
			        }
			    }
			
			    if (that.mch_list && that.mch_list.length) {
			        for (var n in that.mch_list) {
			            for (var e in that.mch_list[n].list) {
			                if (that.mch_list[n].list[e].checked) {
			                    i.push(that.mch_list[n].list[e].id);
			                }
			            }
			        }
			    }
			
			    if (0 == i.length) {
			        return true;
			    }
				uni.showModal({
					title: '提示',
					content: '确认删除吗?',
					success: function (res) {
						if (res.confirm) {
							c.del_cart({ids:i.join(',')},(res) => {
								if(res.code == 1){
									setTimeout(() => {
										that._index();
									},1000)
									
								}
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			    
			},
			cartSubmit(){
				var that = this;
				var t = that.cart_list;
				var i = [];
				for (var n in t) {
				    if (t[n].checked && !t[n].disabled) {
				        i.push(t[n].id);
				    }
				}
							
				if (that.mch_list && that.mch_list.length) {
				    for (var n in that.mch_list) {
				        for (var e in that.mch_list[n].list) {
				            if (that.mch_list[n].list[e].checked && !that.mch_list[n].list[e].disabled) {
				                i.push(that.mch_list[n].list[e].id);
				            }
				        }
				    }
				}
							
				if (0 == i.length) {
					uni.showToast({
						title:'请选择结算商品',
						icon:'none'
					})
				    return true;
				}
				uni.navigateTo({
					url:"/pages2/shop/order-submit/order-submit?cart_ids="+i.join(',')
				})
			},
			checkGroup: function (t) {
			    var that = this;
			    var i = t.currentTarget.dataset.type;
			    var c = t.currentTarget.dataset.index;
			    if ('self' == i) {
			        for (var e in that.cart_list) {
			            that.cart_list[e].checked = !that.check_all_self;
						if(!that.check_all_self === false){
							that.cart_check_all = false
						}
	
					}
					that.check_all_self=!that.check_all_self
					that.cart_list=that.cart_list
			    }
			
			    if ('mch' == i) {
			        for (var e in that.mch_list[c].list) {
			            that.mch_list[c].list[e].checked = !that.mch_list[c].checked_all;
						if(!that.mch_list[c].checked_all === false){
							that.cart_check_all = false
						}
			        }
			
			        that.mch_list[c].checked_all = !that.mch_list[c].checked_all;
			        that.mch_list=that.mch_list
			    }
			
			    that.updateTotalPrice();
			},
		}
	}
</script>

<style>
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		background: #fff;
		border-top: 1rpx solid #e3e3e3;
		width: 100%;
		z-index: 1000;
	}

	.cart-list {
		padding-bottom: 24rpx;
	}

	.bottom-bar .submit-btn {
		background: #ff4544;
		color: #fff;
		width: 160rpx;
		text-align: center;
	}

	.bottom-bar .edit-btn {
		background: #3c8ee5;
		color: #fff;
		width: 160rpx;
		text-align: center;
	}

	.cart-checkbox {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		background-size: 100% 100%;
		background-image: url();
	}

	.cart-checkbox.active {
		background-image: url();
	}

	.cart-item {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
		padding: 32rpx 24rpx 16rpx 0;
	}

	.cart-item .goods-pic {
		width: 156rpx;
		height: 156rpx;
		margin-right: 20rpx;
	}

	.cart-item .goods-name {
		margin-bottom: 10rpx;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.cart-item .attr-list,
	.cart-item .num {
		font-size: 9pt;
		color: #888;
	}

	.cart-item .attr-list .attr-item {
		display: inline-block;
		margin-right: 36rpx;
	}

	.cart-item .attr-list .attr-item:last-child {
		margin-right: 0;
	}

	.cart-item .price {
		color: #ff4544;
	}

	.cart-item .cart-tag {
		font-size: 8pt;
		color: #ff4544;
		background: #ffd3d6;
		padding: 3rpx 6rpx;
	}

	.page.show_navbar .body .bottom-bar {
		bottom: 115rpx;
	}

	.page.show_navbar.device_iphone_x .body .bottom-bar {
		bottom: 180rpx;
	}

	.image1 {
		width: 60rpx;
		height: 60rpx;
	}

	.row-data {
		height: 60rpx;
		margin: 0 4rpx;
		padding-top: 10rpx;
		width: 88rpx;
		text-align: center;
		background: #f7f7f7;
		font-size: 11pt;
		color: #353535;
	}

	.mch-header {
		background: #fff;
		border-top: 1rpx solid #e3e3e3;
		border-bottom: 1rpx solid #e3e3e3;
	}
</style>
